<template>
  <div class="drawer">
    <el-drawer
      :visible.sync="$store.state.feedback.showDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="40%"
    >
      <div class="title">用户反馈</div>
      <div class="info">
        <p>
          <span class="label">意见类型：</span>
          <span>{{ detail.commentType }}</span>
        </p>
        <p class="comment">
          <span class="label">意见内容：</span>
          <span class="commentDesc">{{ detail.commentContent }}</span>
        </p>
        <p>
          <span class="label">用户昵称：</span>
          <span>{{ detail.customerName || '未知' }}</span>
        </p>
        <p>
          <span class="label">手机号：</span>
          <span>{{ detail.customerPhone || '未知' }}</span>
        </p>
        <p>
          <span class="label">上传时间：</span>
          <span>{{ detail.createTime }}</span>
        </p>
      </div>
      <swiper :imgList="detail.commentImg"></swiper>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      direction: 'rtl'
    }
  },
  computed: {
    detail () {
      return this.$store.state.feedback.feedbackDetail
    }
  },
  methods: {
    // 点击半透明区域关闭抽屉
    handleClose (done) {
      done()
      this.$store.commit('feedback/set_feedbackDetail', {})
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep #el-drawer__title {
  position: relative;
  z-index: 999;
  height: 20px;
}

::v-deep [class*=" el-icon-"] {
  padding-top: 16px;
}

.drawer {
  .title {
    height: 48px;
    background-color: rgba(87, 131, 255, 0.05);
    color: #333;
    font-size: 16px;
    padding-left: 24px;
    line-height: 48px;
  }

  .info {
    padding-left: 90px;
    padding-top: 33px;
    padding-bottom: 33px;

    p {
      line-height: 52px;
      height: 52px;
      span {
        font-size: 16px;
        color: #333;
      }
      .label {
        width: 84px;
        color: #666;
        display: inline-block;
        text-align: right;
        margin-right: 6px;
      }
    }
  }
  .swiper {
    margin: 0 auto;
  }
  .comment{
    height: auto !important;
    .commentDesc{
      word-break: break-all;
    }
  }
}
</style>
